<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-10-20 10:55:04
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2022-10-28 14:04:56
 * @FilePath: \v2.0.0\src\views\inspection\components\scroll-bar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup></script>

<template>
  <div class="w-full bg-red-400 mb-4 flex items-center rounded p-4">
    <img
      class="select-none"
      src="@/assets/images/inspection/alarm.png"
      alt=""
    />
    <div class="grow overflow-hidden ml-4 select-all">
      <span class="w-full block animate"
        >安保机器人1：检测到人员入侵，请管理员尽快处理！！！</span
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.animate {
  animation: 15s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}
</style>
